<template>
    <!-- 区域选择 -->
    <a-select v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" v-model="currentValue" allowClear>
        <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
        <a-spin v-if="fetching" slot="notFoundContent" size="small" />
        <a-select-option :disabled="!i.enabled" v-for="i in area" :key="i.id" :value="i.id">{{ i.name }}</a-select-option>
        <!--        <a-select-option  v-for="i in project" :key="i.code" :value="i.code">{{currentValue }}</a-select-option>-->
    </a-select>
</template>
<script>
import { getSubcontractorCostArea } from '@/api/businessAffairs/subcontractCostPrice.js'

export default {
    name: 'SelectArea',
    props: {
        // v-model绑定的数据
        value: {
            type: [Array, String, Object, Number],
        },
        // 需要联动的表单名，
        form: {
            type: Object,
            default: function () {
                return {}
            },
        },
        // placeholder
        placeholder: {
            type: String,
            default: function () {
                return '请选择'
            },
        },
        // 需要联动的表单名
        keyValue: {
            type: String,
            default: function () {
                return 'branchCompanyId'
            },
        },
        // 联动表单值改变时是否清空当前表单值
        isClear: {
            type: Boolean,
            default() {
                return true
            },
        },
        isInit: {
            type: Boolean,
            default() {
                return false
            },
        },
        //如果是编辑，第一次不要重置绑定的值。。。。
        isEdit: {
            type: Boolean,
            default() {
                return false
            },
        },
    },
    mounted() {
        this.isInit || (this.attr && this.getSubcontractorCostArea())
    },
    data() {
        return {
            isCanClear: !this.isEdit,
            fetching: false,
            area: [],
        }
    },
    methods: {
        async getSubcontractorCostArea() {
            // this.$nextTick(() => {
            this.fetching = true
            let params = {
                branchComId: this.attr,
                type: 15,
                pageSize:1000
            }
            const [err, res] = await getSubcontractorCostArea(params)
            this.fetching = false
            if (err) {
                this.$message.error('err:', res.message)
            } else {
                this.area = res.data
            }
            // getSubcontractorCostArea(params)
            //     .then((res) => {
            //         this.fetching = false
            //         if (res.code === 200) {
            //             this.project = res.data
            //         } else {
            //             this.$message.error('err:', res.message)
            //         }
            //     })
            //     .catch((res) => {
            //         this.fetching = false
            //     })
            // })
        },
        // // 获取指定项目的name
        // getValueName(id) {
        //     const target = this.project.find((item) => item.code === id)
        //     return (target && target.name) || void 0
        // },
    },
    computed: {
        // 需要联动的表单值
        attr() {
          let attrValue
          const keys = this.keyValue.split('.')
          const findValueFromKeys = (data, key) => {
            if(data instanceof Object && keys.some(k => k === key)){
              return findValueFromKeys(data[key], keys[keys.findIndex(k => k === key) + 1])
            }
            return data
          }
          if(keys && !!keys.length){
            attrValue = findValueFromKeys(this.form, keys[0])
          }
          return attrValue
        },
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                if (this.$listeners.getOption) {
                  let res = this.area?.find((item) => item.id == this.value)
                  this.$emit('getOption', res)
                }
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
    watch: {
        // 监听联动表单值重置项目列表
        attr(val) {
            // 清空表单
            if (this.isClear) {
                this.currentValue = ''
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            }
            // 清空表单
            if (this.isEdit && this.isCanClear) {
                this.currentValue = ''
                this.$emit('resetSelf') // 在搜索组件(SearchData)中重置自身的值
            } else {
                this.isCanClear = true
            }
            // 重置列表
            this.area = []
            // console.log(this.area)
            val && this.getSubcontractorCostArea()
        },
    },
}
</script>
